<template>
  <div class="login-container">
    <div class="form-wrap">
      <div class="header">
        <h2>嗨购后台管理系统</h2>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="ruleForm.username" type="text" autocomplete="off">
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密&nbsp;&nbsp;&nbsp;码:" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="confirmpassword">
          <el-input
            v-model="ruleForm.confirmpassword"
            type="password"
            autocomplete="off"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { login } from '@/api/user.js'
import { mapMutations, mapState } from 'vuex'
export default {
  components: {
    UserFilled, // 需要对于引入的icon图标注册之后，才可以使用
    Lock
  },
  data() {
    return {
      ruleFormRef: null,
      ruleForm: {
        username: '',
        password: '',
        confirmpassword: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirmpassword: [
          { required: true, validator: this.validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.ruleFormRef = this.$refs.ruleFormRef
  },
  computed: {
    ...mapState(['currentPath'])
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    validatePass(rule, value, callback) {
      if (value === '') {
        callback(new Error('Please input the password again'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error("Two inputs don't match!"))
      } else {
        callback()
      }
    },
    submitForm(formEl) {
      // 此处参数就是获取到ref标记的form表单的实例
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          login({
            adminname: this.ruleForm.username,
            password: this.ruleForm.password
          }).then((res) => {
            // 需要借助vuex存储登录后的用户信息
            this.updateUserInfo(res.data)
            // 需要进行编程式导航跳转到home首页
            this.$router.push(this.currentPath || '/')
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  height: 100%;
  background: #2b3c4d;
  .header {
    text-align: center;
    text-shadow: 2px 2px 6px #ccc;
    color: #fff;
  }
  .form-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .demo-ruleForm {
    width: 320px;
    background: #fff;
    padding: 32px 32px 20px 32px;
    border-radius: 10px;
    .el-button {
      width: 100%;
      margin-top: 24px;
    }
  }
}
</style>
